<script setup lang="ts">
import { toRef, toRefs, toRaw, reactive } from 'vue';

// let message = {           
//     a: 1,
//     b: 1
// }
// let state = toRef(message, 'b')     // 将某个属性变成响应式的， 原始对象如果不是响应式的，视图不会改变

let message = reactive({    
    a: 1,
    b: 1
})
let state = toRef(message, 'b')     // 原始对象是响应式的，视图改变

let obj = reactive({
    foo: 1,
    bar: 1
})
// let { foo, bar } = obj      // 这样解构的 foo 和 bar 不是响应式的，视图不改变
let { foo, bar } = toRefs(obj)  // 使用toRefs 变成响应式

let raw = toRaw(obj)     // 变成原始对象，非响应式的

const changeMsg = () => {
    state.value ++ 

    console.log('原始对象--->', message);             // 原始对象里面的 b 改变了
    console.log('引用改变的对象--->', state);         // state里的 b 也改变了
    
    foo.value ++
    bar.value ++

    console.log(obj);    // 有 Proxy 包裹
    console.log(raw);    // 没有 Proxy 包裹
    
}



</script>

<template>
  <div>
    <button @click="changeMsg">change</button>
    <div>{{message}}</div>

    <div>foo ---> {{foo}}</div>
    <div>bar ---> {{bar}}</div>
  </div>
</template>

<style>
</style>